<template>
  <van-nav-bar class="header" to="/" :fixed="true" z-index="100" title="" left-text="支付失败" left-arrow
    @click-left="onClickLeft" />
  <div class="box">
    <van-icon class="one" name="checked" />
    <p class="two">支付失败</p>
    <van-button @click="handleBack" to="/orderdel" class="three" type="primary" color="rgb(243, 64, 64)"
      size="large">重新点餐</van-button>
    <van-button to="/takeout" class="four" type="primary" color="rgb(243, 64, 64)" size="large">查看订单</van-button>
  </div>
</template>

<script setup lang="ts">
import { useOrderDel } from '../../store/orderDel';
const Order = useOrderDel()
const onClickLeft = () => history.back();
const handleBack = () => {
  Order.cartAllInfo.allNum = 0
  Order.cartAllInfo.Allprice = 0
}
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid rgb(176, 173, 173);
}

.box {
  margin-top: 46px;
  text-align: center;

  .one {
    margin-top: 100px;
    font-size: 50px;
    color: rgb(243, 64, 64);
  }

  .two {
    font-size: 20px;
  }

  .three {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 300px;
  }

  .four {
    width: 300px;
  }
}
</style>